<template>
    <ak-header data-display="true">
        <button type="button" class="left_0 w_25 pl_3 text_al_l text_12em" data-href="javascript:history.back();"><i class="text_14em icon-ln_fanhui_b"></i>返回</button>
        <h1 class="text_al_c">布局展示</h1>
        <button type="button" class="right_0 w_25 pr_3 text_al_r text_12em" id="plug_Share">分享</button>
    </ak-header>
    <article class="plug_refresh">
        <!----------Andrew_NavScroll---------->
        <div class="module press">
            <div class="plug_tabs_find rel ovh">
                <nav class="rel ovh h_3em bg_white">
                    <ul class="ml_05em top_0 abs zindex_2 text_hidden scrolling">
                        <li class="dis_inbl mr_1em line_h_26em text_12em text_al_c">头条</li>
                        <li class="dis_inbl mr_1em line_h_26em text_12em text_al_c">体育</li>
                        <li class="dis_inbl mr_1em line_h_26em text_12em text_al_c">娱乐</li>
                        <li class="dis_inbl mr_1em line_h_26em text_12em text_al_c">要闻</li>
                        <li class="dis_inbl mr_1em line_h_26em text_12em text_al_c">财经</li>
                        <li class="dis_inbl mr_1em line_h_26em text_12em text_al_c">科技</li>
                        <li class="dis_inbl mr_1em line_h_26em text_12em text_al_c">汽车</li>
                        <li class="dis_inbl mr_1em line_h_26em text_12em text_al_c">时尚</li>
                        <li class="dis_inbl mr_1em line_h_26em text_12em text_al_c">房产</li>
                        <li class="dis_inbl mr_1em line_h_26em text_12em text_al_c">本地</li>
                    </ul>
                </nav>
                <article class="bor_top bor_gray_ddd rel ovh bg_white dis_none">
                    <div class="fl">
                        <section class="pa_3 line_h_16em">【头条新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16em">【体育新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16em">【娱乐新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16em">【要闻新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16em">【财经新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16em">【科技新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16em">【汽车新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16em">【时尚新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16em">【房产新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16em">【本地新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                </article>
            </div>
        </div>

        <!----------Andrew_ReadMore---------->
        <div class=" module mt_5 bg_white">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">查看更多内容插件</h3>
            <article class="plug_readmore wp_94 pt_3 line_h_18em">
                <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
            </article>
        </div>

        <!----------Andrew_Vticker---------->
        <div class="module mt_5 bg_white">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">列表滚动展示</h3>
            <div class="plug_vticker pb_02em">
                <ul class="left_3 w_94 list_h_36em list">
                    <li class="bor_bottom bor_gray_ddd line_h_34em">1、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                    <li class="bor_bottom bor_gray_ddd line_h_34em">2、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                    <li class="bor_bottom bor_gray_ddd line_h_34em">3、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                    <li class="bor_bottom bor_gray_ddd line_h_34em">4、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                    <li class="bor_bottom bor_gray_ddd line_h_34em">5、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                    <li class="bor_bottom bor_gray_ddd line_h_34em">6、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                    <li class="bor_bottom bor_gray_ddd line_h_34em">7、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                    <li class="bor_bottom bor_gray_ddd line_h_34em">8、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                    <li class="bor_bottom bor_gray_ddd line_h_34em">9、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                </ul>
            </div>
        </div>

        <div class="module mt_5 list press">
            <ul>
                <li class="bg_white rel ovh mb_5"><!--可循环-->
                    <dl class="rel h_in ovh list_h_36em wp_94 bor_bottom bor_gray_ddd touchstart" data-href="/page3">
                        <dt class="fl">列表布局展示</dt>
                        <dd class="fr rel mr_7">
                            <span class="fr c_orange ml_05em">状态</span>
                        </dd>
                        <dd class="abs top_0 right_0 mr_3">
                            <i class="fr icon-ln_qianjin_b text_16em c_gray_777"></i>
                        </dd>
                    </dl>
                    <dl class="wm_94 ovh pt_1em pb_1em bor_bottom_dashed bor_gray_ddd">
                        <dt class="fl rel ovh h_in w_50">
                            <em class="fl mr_03em">姓名：</em>
                            <span class="fl h_in line_h_in c_gray_777">安德鲁</span>
                        </dt>
                        <dd class="fl rel ovh h_in w_50">
                            <em class="fl mr_03em">性别：</em>
                            <span class="fl h_in line_h_in c_gray_777">男</span>
                        </dd>
                    </dl>
                    <dl class="wm_94 ovh pt_1em pb_1em bor_bottom_dashed bor_gray_ddd">
                        <dt class="fl rel ovh h_in mr_03em">邮箱：</dt>
                        <dd class="fl rel ovh h_in c_gray_777">andrewkim365@qq.com</dd>
                    </dl>
                </li>
            </ul>
        </div>

        <div class="module list press">
            <h3 class="wp_94 bg_white line_h_36em text_bold bor_bottom_dashed bor_gray_ddd c_title"><i class="icon-yk_xinxi_fill text_al_s text_14em mr_02em"></i> 详情描述展示</h3>
            <p class="wp_94 bg_white pb_3 pt_3 line_h_2em c_gray_777">
                欢迎使用AKjs移动端前端UI框架。当前内容是详情内容的展示。
            </p>
        </div>

        <div class="module list mt_5">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">表单布局（左对齐）</h3>
            <form action="#" method="get" onsubmit="return false;">
                <ul class="wp_94 press bg_white list_h_36em">
                    <li class="rel bor_bottom bor_gray_ddd">
                        <label class="dis_block rel ovh fl text_ind_2em mr_1em line_h_in">姓名</label>
                        <input type="text" class="fl w_75 c_gray_777 plug_Delete" required value="" maxlength="6" placeholder="请输入真实姓名" />
                    </li>
                    <li class="rel bor_bottom bor_gray_ddd">
                        <label class="dis_block rel ovh fl mr_1em line_h_in">手机号码</label>
                        <input type="tel" class="fl w_75 c_gray_777 plug_Delete" required value="" maxlength="11" placeholder="请输入手机号码" pattern="[0-9]*" />
                    </li>
                    <li class="rel bor_bottom bor_gray_ddd">
                        <label class="dis_block rel ovh fl pl_2em mr_1em line_h_in">性别</label>
                        <span class="fl c_gray_777">男</span>
                    </li>
                </ul>
            </form>
        </div>

        <!----------Andrew_Circliful---------->
        <div class="module mt_5 list press bg_white">
            <h3 class="bg_white c_title pl_3 mb_2 line_h_36em bor_bottom bor_gray_ddd">圆形统计插件</h3>
            <div class="plug_circliful fl" data-dimension="120" data-text="35%" data-info="当前进度" data-width="10" data-font_size="1.2em" data-percent="35" data-prog_color="#4cafe9" data-bg_color="#dddddd" data-font_color="#ffffff" data-fill_color="#999999"></div>
            <div class="plug_circliful fl" data-dimension="120" data-text="65%" data-info="当前进度" data-width="10" data-font_size="1.2em" data-percent="65" data-prog_color="#19d100" data-bg_color="#dddddd"></div>
            <div class="plug_circliful fl" data-dimension="120" data-text="85%" data-info="当前进度" data-width="10" data-font_size="1.2em" data-percent="85" data-prog_color="#d94945" data-bg_color="#dddddd" data-type="spacing" data-font_color="#ffffff" data-spacing_color="#ff7e00"></div>
        </div>

        <!----------Andrew_Marquee---------->
        <div class="module press mt_5 bg_white">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">滚动展示</h3>
            <section class="plug_marquee mt_3 mb_3" style="height: 80px">
                <div class="wm_96 ovh mb_1em line_h_2em c_gray_777">
                    <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                </div>
            </section>
        </div>

        <div class="module press mt_5 bg_white">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">图片加载失败展示</h3>
            <section class="wm_96 ovh mb_1em line_h_2em c_gray_777">
                <img data-src="./img/akjs" /> <!--输入无效的图片地址-->
            </section>
        </div>

        <div class="module press mt_5 bg_white">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">表格样式</h3>
            <section class="wm_94 pt_3 pb_3 ovh rel">
                <table class="bor_top bor_bottom bor_gray_ddd">
                    <thead class="c_title text_al_c list_h_3em bor_top2 bor_title">
                    <tr>
                        <th class="text_bold">标题A</th>
                        <th class="text_bold">标题B</th>
                        <th class="text_bold">标题C</th>
                        <th class="text_bold">标题D</th>
                    </tr>
                    </thead>
                    <tbody class="c_gray_777 text_al_c list_h_36em list_f9f_white bor_top bor_gray_ddd">
                    <tr class="bor_bottom bor_gray_ddd">
                        <td>内容1-1</td>
                        <td>内容1-2</td>
                        <td>内容1-3</td>
                        <td>内容1-4</td>
                    </tr>
                    <tr class="bor_bottom bor_gray_ddd">
                        <td>内容2-1</td>
                        <td>内容2-2</td>
                        <td>内容2-3</td>
                        <td>内容2-4</td>
                    </tr>
                    <tr class="bor_bottom bor_gray_ddd">
                        <td>内容3-1</td>
                        <td>内容3-2</td>
                        <td>内容3-3</td>
                        <td>内容3-4</td>
                    </tr>
                    <tr class="bor_bottom bor_gray_ddd">
                        <td>内容4-1</td>
                        <td>内容4-2</td>
                        <td>内容4-3</td>
                        <td>内容4-4</td>
                    </tr>
                    </tbody>
                </table>
            </section>
        </div>

        <!----------Andrew_Template---------->
        <div class="module list mt_5 ovh rel">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">图片列表展示</h3>
            <ul class="plug_for">
                <li class="rel ovh bg_white pa_3 bor_bottom bor_gray_ddd touchstart" data-href="/page3">
                    <figure class="fl bg_gray_f5f border bor_gray_ddd wh_6em img_auto">
                        {{html Image}}
                    </figure>
                    <div class="fl list_h_18em ml_1em ovh w_65">
                        <h3 class="text_12em">${Title}</h3>
                        <p class="c_gray_777">
                            <del class="text_al_t">${Price}</del>
                        </p>
                        <p class="c_gray_999 text_hidden">{{html Content}}</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="module press mt_5 bg_white">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">功能布局</h3>
            <ul class="ovh list_h_8em verline_list length3">
                <li class="fl rel text_al_c touchstart">
                    <button type="button" class="dis_block ovh w_100" data-href="/page3">
                        <label class="bg_title bor_rad_50 c_white wh_4em mt_05em center">
                            <i class="text_al_c text_al_t line_h_18em text_24em icon-xt_pingguo"></i>
                        </label>
                        <span class="dis_block text_al_c line_h_2em">Apple</span>
                    </button>
                </li>
                <li class="fl rel text_al_c touchstart">
                    <button type="button" class="dis_block ovh w_100" data-href="/page3">
                        <label class="bg_title bor_rad_50 c_white wh_4em mt_05em center">
                            <i class="text_al_c text_al_t line_h_18em text_24em icon-xt_anzhuo"></i>
                        </label>
                        <span class="dis_block text_al_c line_h_2em">Android</span>
                    </button>
                </li>
                <li class="fl rel text_al_c touchstart">
                    <button type="button" class="dis_block ovh w_100" data-href="/page3">
                        <label class="bg_title bor_rad_50 c_white wh_4em mt_05em center">
                            <i class="text_al_c text_al_t line_h_18em text_24em icon-xt_weiruan"></i>
                        </label>
                        <span class="dis_block text_al_c line_h_2em">Windows</span>
                    </button>
                </li>
            </ul>
        </div>

        <!----------Andrew_QRcode---------->
        <div class="module mt_5 list press bg_white">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">二维码生成插件</h3>
            <div class="plug_qrcode pa_3 text_al_c"></div>
        </div>

        <!----------Andrew_TypeIt---------->
        <div class="module mt_5 press bg_white">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">文字打字效果</h3>
            <section class="pa_2 list h_8em">
                <span class="plug_TypeIt line_h_24em"></span>
            </section>
        </div>
        <div class="module mt_5 press">
            <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">时间轴布局展示</h3>
            <div class="ak-TimeAxis">
                <cite class="w_3em ml_3">
                    <strong class="bor_dashed2 bor_gray_ddd"></strong>
                </cite>
                <ul>
                    <li class="mt_1em mb_1em">
                        <section class="check wh_3em bg_title bor_rad_50 line_h_3em text_al_c minus_left_3em">
                            <h6 class="c_white text_06em">今天</h6>
                        </section>
                        <locator class="bor_gray_ddd minus_left_3em">
                            <span class="bor_white"></span>
                        </locator>
                        <article class="bor_gray_ddd border bor_rad_03em bg_white line_h_14em pa_3 mr_3 minus_ml_3em">
                            <p class="c_gray_777">欢迎使用AKjs移动端前端UI框架。当前内容是时间轴样式展示页面。</p>
                        </article>
                    </li>
                    <li class="mt_1em mb_1em">
                        <section class="wh_3em bg_gray_ccc bor_rad_50 line_h_3em text_al_c minus_left_3em">
                            <h6 class="c_white text_06em">昨天</h6>
                        </section>
                        <locator class="bor_gray_ddd minus_left_3em minus_left_3em">
                            <span class="bor_white"></span>
                        </locator>
                        <article class="bor_gray_ddd border bor_rad_03em bg_white line_h_14em pa_3 mr_3 minus_ml_3em">
                            <p class="c_gray_777">欢迎使用AKjs移动端前端UI框架。当前内容是时间轴样式展示页面。</p>
                        </article>
                    </li>
                    <li class="mt_1em mb_1em">
                        <section class="wh_3em bg_gray_ccc bor_rad_50 line_h_3em text_al_c minus_left_3em">
                            <h6 class="c_white text_06em">前天</h6>
                        </section>
                        <locator class="bor_gray_ddd minus_left_3em minus_left_3em">
                            <span class="bor_white"></span>
                        </locator>
                        <article class="bor_gray_ddd border bor_rad_03em bg_white line_h_14em pa_3 mr_3 minus_ml_3em">
                            <p class="c_gray_777">欢迎使用AKjs移动端前端UI框架。当前内容是时间轴样式展示页面。</p>
                        </article>
                    </li>
                    <li class="mt_1em mb_1em">
                        <section class="wh_3em bg_gray_ccc bor_rad_50 line_h_3em text_al_c minus_left_3em">
                            <h6 class="c_white text_06em">一周前</h6>
                        </section>
                        <locator class="bor_gray_ddd minus_left_3em minus_left_3em">
                            <span class="bor_white"></span>
                        </locator>
                        <article class="bor_gray_ddd border bor_rad_03em bg_white line_h_14em pa_3 mr_3 minus_ml_3em">
                            <p class="c_gray_777">欢迎使用AKjs移动端前端UI框架。当前内容是时间轴样式展示页面。</p>
                        </article>
                    </li>
                    <li class="mt_1em mb_1em">
                        <section class="wh_3em bg_gray_ccc bor_rad_50 line_h_3em text_al_c minus_left_3em">
                            <h6 class="c_white text_06em">半年前</h6>
                        </section>
                        <locator class="bor_gray_ddd minus_left_3em minus_left_3em">
                            <span class="bor_white"></span>
                        </locator>
                        <article class="bor_gray_ddd border bor_rad_03em bg_white line_h_14em pa_3 mr_3 minus_ml_3em">
                            <p class="c_gray_777">欢迎使用AKjs移动端前端UI框架。当前内容是时间轴样式展示页面。</p>
                        </article>
                    </li>
                    <li class="mt_1em mb_1em">
                        <section class="wh_3em bg_gray_ccc bor_rad_50 line_h_3em text_al_c minus_left_3em">
                            <h6 class="c_white text_06em">一年前</h6>
                        </section>
                        <locator class="bor_gray_ddd minus_left_3em minus_left_3em">
                            <span class="bor_white"></span>
                        </locator>
                        <article class="bor_gray_ddd border bor_rad_03em bg_white line_h_14em pa_3 mr_3 minus_ml_3em">
                            <p class="c_gray_777">欢迎使用AKjs移动端前端UI框架。当前内容是时间轴样式展示页面。</p>
                        </article>
                    </li>
                </ul>
            </div>
        </div>

        <!----------Andrew_PopupWin Start---------->
        <div id="plug_ShareWin" class="dis_none bg_white pa_3 w_100 zindex_8"> <!--顶部位置显示的弹窗-->
            <ul class="ovh list_h_8em verline_list length3">
                <li class="fl rel text_al_c touchstart">
                    <button type="button" class="dis_block ovh w_100" data-href="/page3">
                        <label class="bg_wechat bor_rad_50 c_white wh_4em mt_05em center">
                            <i class="text_al_c text_al_t line_h_16em text_24em icon-sr_weixin"></i>
                        </label>
                        <span class="dis_block text_al_c line_h_2em">分享至微信</span>
                    </button>
                </li>
                <li class="fl rel text_al_c touchstart">
                    <button type="button" class="dis_block ovh w_100" data-href="/page3">
                        <label class="bg_jd bor_rad_50 c_white wh_4em mt_05em center">
                            <i class="text_al_c text_al_t line_h_16em text_24em icon-sr_pengyouquan"></i>
                        </label>
                        <span class="dis_block text_al_c line_h_2em">分享至朋友圈</span>
                    </button>
                </li>
                <li class="fl rel text_al_c touchstart">
                    <button type="button" class="dis_block ovh w_100" data-href="/page3">
                        <label class="bg_qq bor_rad_50 c_white wh_4em mt_05em center">
                            <i class="text_al_c text_al_t line_h_16em text_24em icon-sr_qq"></i>
                        </label>
                        <span class="dis_block text_al_c line_h_2em">分享至QQ</span>
                    </button>
                </li>
            </ul>
        </div>
        <!----------Andrew_PopupWin End---------->
    </article>

    <ak-footer data-display="false">
    </ak-footer>
</template>

<script type="text/javascript">
    //引入Andrew插件的区域

    /*-----------------------------------------------Andrew_ReadMore 使用方法-------------------------------------------*/
    $(function () {
        $('.plug_readmore').Andrew_ReadMore({
            speed: 500, //展开折叠毫秒速度
            maxHeight: 200, //被隐藏更多的内容时的高度（px）
            heightMargin: 16, //以像素为单位，以避免倒塌是比仅稍大块了maxHeight
            moreLink: '<button class="bg_white c_gray_333 w_100 h_36em bor_top bor_gray_ddd">查看更多 <i class="icon-ln_xiangxia"></i></button>', //展开按钮HTML
            lessLink: '<button class="bg_white c_gray_333 w_100 h_36em bor_top bor_gray_ddd">收起内容 <i class="icon-ln_xiangshang"></i></button>', //收起按钮HTML
            startOpen: false, //不要立即截断，开始在全开位置
            afterToggle: function(trigger, element, expanded) { //称为后，该块被折叠或展开
                if(!expanded) {
                    $('main').animate({
                        scrollTop: element.offset().top
                    }, {duration: 500 } );
                }
            },
            beforeToggle: function(trigger, element, expanded) { //称为或多或少链接被点击后，但之前的块被折叠或展开
                if(!expanded) {
                }
            }
        });
    });

    /*-----------------------------------------------Andrew_Vticker 使用方法-------------------------------------------*/
    $(function(){
        $('.plug_vticker').Andrew_Vticker({
            showItems : 4, //显示多少行
            pause : 3000, //滚动间隔，单位为毫秒
            speed : 500, //每次滚动持续时间，单位为毫秒
            mousePause : false, //鼠标悬停是否停止滚动
            direction : "up", //滚动方向，可选 ‘up’ / ‘down’
            isPaused: false, //默认是否暂停
            height: 0 //容器高度，默认为 0，即根据 showItems 个数自动计算
        });
    });

    /*-----------------------------------------------Andrew_TypeIt 使用方法-------------------------------------------*/
    $(function(){
        $(".plug_TypeIt").Andrew_TypeIt({
            strings: [
                "欢迎使用AKjs移动端前端UI框架。",
                "AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。"
            ],
            typeSpeed: 10, //打字速度
            backDelay: 50, //删除文字速度
            contentType: 'html', // html or text
            loop: true, //是否重复循环 （true,false）
            callback: function(fun){ //结束后的回调
                //console.log("已结束")
            },
            preString: function(array) {
                //console.log("准备就绪")
            },
            onString: function(array) {
                //console.log("进行中")
            }
        });
    });

    /*-----------------------------------------------Andrew_Template 使用方法-------------------------------------------*/
    var list_data = [
        {
            Image: "<img src=\"./img/tibet-1.jpg\">",
            Title: "产品名称001",
            Price: "￥400.00",
            Content: "该产品的简介和描述该产品的简介和描述该产品的简介和描述"
        },
        {
            Image: "<img src=\"./img/tibet-2.jpg\">",
            Title: "产品名称002",
            Price: "￥500.00",
            Content: "该产品的简介和描述该产品的简介和描述该产品的简介和描述"
        },
        {
            Image: "<img src=\"./img/tibet-3.jpg\">",
            Title: "产品名称003",
            Price: "￥250.00",
            Content: "该产品的简介和描述该产品的简介和描述该产品的简介和描述"
        }
    ];
    $(".plug_for").Andrew_Template(list_data);

    /*-----------------------------------------------Andrew_Lazyload 使用方法-------------------------------------------*/
    $(function() {
        $("img").Andrew_Lazyload({ //对所有的图片懒加载
            scroll: $("main"), //滚动区域的容器
            scrollTop: 100, //设置初始化滚动条位置（当滚动条滚动到当前设置的位置时所有效果将进行初始化）
            Img_Effect: "fadeIn", //图片加载动画效果
            Img_LoadStyle: "loading01", //图片加载之前显示的Loading效果 （loading01~05）注：Img_Effect，Img_LoadStyle，Img_Error 三个参数是图片懒加载专用参数；
            Img_Error: "./img/noimage.png", //图片加载失败时默认显示图片URL
            Callback: function(ele) { //初始化回调入口
                //console.log(ele);
            },
            Scrollback: function(ele,scroll) { //页面滚动后的回调
                //console.log(ele);
            }
        });
    });

    /*-----------------------------------------------Andrew_Popupwin (分享功能) 使用方法-------------------------------------------*/
    $(function(){
        setTimeout(function() { //为了兼容所有的jQuery版本header元素里面的任何绑定事件都需要延迟执行
            $("#plug_Share").bind("click", function (c) {
                Andrew_Popupwin({
                    dom: "#plug_ShareWin", //弹窗内容的布局
                    position: "bottom", //位置类型(top，bottom，left，right，middle)
                    effectIn: "slideInUp ani_05s", //弹窗显示效果 (css动画库：andrew.animate.css)
                    effectOut: "slideOutDown ani_05s", //弹窗消失效果 (css动画库：andrew.animate.css)
                    maskPosition:"4", //Mask的z-index数值
                    closeBtn: ".ak-mask", //关闭弹窗按钮的Class名
                    OneButton: c.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                    toggleIcon: "", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                    callback :function (ele) { //通过回调获取弹窗显示后的以上参数
                        console.log($(ele[0].dom)); //获取当前的弹窗元素
                    }
                });
            });
        },100);
    });

    /*-----------------------------------------------Andrew_Marquee 使用方法-------------------------------------------*/
    $(function(){
        $('.plug_marquee').Andrew_Marquee({
            direction: 'up', //滚动方向设置 （可选 left / right / up / down）
            loop: -1, //是否重复循环 （0 = 不重复，-1 = 重复）
            scrolldelay: 0, //每次重复之前的延迟
            scrollamount: 10, //滚动速度 （数字越大速度越快）
            circular: true, //无缝滚动，如果为 false，则和 marquee 效果一样
            drag: true, //鼠标拖动 (true / false)
            runshort: true, //内容不足是否滚动 (true / false)
            hoverstop: true, //鼠标悬停暂停 (true / false)
            inverthover: false, //反向，即默认不滚动，鼠标悬停滚动 (true / false)
            xml: false //加载 xml 文件 (false 或 xml:'text.xml')
        });
    });

    /*-----------------------------------------------Andrew_QRcode 使用方法-------------------------------------------*/
    $(function(){
        $(".plug_qrcode").Andrew_QRcode({
            width: 200, //宽度
            height:200, //高度
            background: "#ffffff", //背景色
            foreground: "#000000", //前景色
            text: "http://m.baidu.com" //任意内容
        });
    });

    /*-----------------------------------------------Andrew_NavScroll 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_tabs_find").Andrew_NavScroll({
            line_style: "dis_block abs bor_top2 bor_title",
            active_corlor: "c_title",
            ClickCallback: function(ele,index) { //回调获取点击后的元素和元素的index
                console.log(ele);
            }
        });
    });

    /*-----------------------------------------------Andrew_Circliful 使用方法-------------------------------------------*/
    $(function(){
        $('.plug_circliful').Andrew_Circliful({
            animationStep: 0.2 //动画毫秒设置
        });
        /*
        data-dimension === 整个圆形的宽高
        data-text === 圆形里的大标题
        data-info === 圆形里的小标题
        data-width="30" === 当前参数进度条边框宽度设置
        data-prog_color === 当前参数进度条边框颜色设置
        data-font_size  === 圆形里的大标题文字大小（px）
        data-percent  === 当前参数设置（百分比）
        data-font_color === 大标题和小标题文字颜色设置
        data-bg_color === 整个圆形的边框颜色
        data-fill_color === 里面填充颜色设置
        data-spacing_color === 整个圆形的边框颜色
        data-type="spacing" === 饼图类型设置 （half, spacing）；空值代表默认类型
        */
    });

    /*-----------------------------------------------Andrew_DropLoad （页面刷新） 使用方法-------------------------------------------*/
    $(function(){
        $('.plug_refresh').Andrew_DropLoad({
            scrollArea : window, // 滑动区域
            domUp : { // 上方DOM
                domRefresh : '↓ 下拉刷新',
                domUpdate  : '↑ 释放更新',
                domLoad    : '刷新中...'
            },
            distance : 20,// 拉动距离
            loadUpFn : function(me){ //上方function
                setTimeout(function(){
                    //刷新后需要执行的代码

                    $(".plug_tabs_find section").css({
                        opacity: 0
                    }).animate({
                        opacity: 1
                    },1000);

                    me.resetload(); //重新初始化控件以及标识量
                    me.unlock(); //解除锁定允许数据继续加载
                    me.noData(false); //是否有数据（false代表有数据）
                },1000);
            }
        });
    });
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-header，ak-footer，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-header></ak-header>
    <div></div>
    <ak-footer></ak-footer>
</template>
<script>
</script>
<style>
</style>
-->